<template>
  <div class="quotationDetail">
    <c-desc
      class="desc"
      :data="quotationDetail"
      :columns="descriptionsData"
      size="small"
    >
      <template v-slot:createDate>
        <span>{{ $getTime(quotationDetail.createDate) }}</span>
      </template>
      <template v-slot:premiumIsshow>
        <span>{{ quotationDetail.premiumIsshow ? "是" : "否" }}</span>
      </template>
      <template v-slot:companyLimitDetail>
        <template
          v-if="
            quotationDetail.companyLimitDetail &&
              quotationDetail.companyLimitDetail.length !== 0
          "
        >
          <span
            v-for="item in quotationDetail.companyLimitDetail"
            :key="item.id"
            >{{ item.companyNickname }}
          </span>
        </template>
        <template v-else>
          <span>--</span>
        </template>
      </template>
    </c-desc>
    <c-table
      :data="tableData"
      :columns="columns"
      :loading="loading"
      size="small"
      :showHeader="false"
    >
      <template v-for="item in updateAttrs" v-slot:[item]="{ row }">
        <span :key="item.id">
          <span>{{ row[item] }}</span>
          <span v-if="$tools.notEmpty(row[item])" class="danger"
            >{{ row["update" + item] }}
          </span>
        </span>
      </template>
      <template v-slot:quotationDetailSalesState="{ row }">
        <TagsDetailStatus :flag="row" />
      </template>
    </c-table>
  </div>
</template>

<script>
import comparison from "../common/comparison.js";
import TagsDetailStatus from "@/components-business/quotation/detailStatus";
import {
  getquotationdetailtoaudit,
  getMyQuotationDetail
} from "@/api/quotation";
import quotationDict from "@/dict/quotation";

export default {
  components: {
    TagsDetailStatus
  },
  props: {
    // 1我的报价详情 2审核报价详情
    type: {
      type: String,
      default: "1"
    },
    //   报价信息
    quotationData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      quotationDetail: {},
      loading: false,
      tableData: [],
      columns: [
        {
          title: "品牌",
          scopedSlots: { customRender: "brand" }
        },
        {
          title: "规格",
          scopedSlots: { customRender: "spec" }
        },
        {
          title: "材质",
          scopedSlots: { customRender: "material" }
        },
        {
          title: "其他",
          scopedSlots: { customRender: "other" }
        },
        {
          title: "仓库简称",
          scopedSlots: { customRender: "warehouseName" }
        },
        {
          title: "库存",
          scopedSlots: { customRender: "amountTotal" }
        },
        {
          title: "剩余库存",
          scopedSlots: { customRender: "amountAvailable" }
        },
        {
          title: "升贴水",
          scopedSlots: { customRender: "premium" },
          hidden: true
        },
        {
          title: "价格",
          scopedSlots: { customRender: "price" },
          hidden: true
        },
        {
          title: "状态",
          dataIndex: "quotationDetailSalesState",
          scopedSlots: { customRender: "quotationDetailSalesState" }
        }
      ],
      descriptionsData: [
        {
          label: "发布时间",
          prop: "createDate",
          slot: "createDate"
        },
        {
          label: "是否显示升贴水",
          prop: "premiumIsshow",
          slot: "premiumIsshow"
        },
        {
          label: "下单倍数",
          prop: "rateLimit"
        },
        {
          label: "交货方式",
          prop: "deliveryType"
        },
        {
          label: "开票方式",
          prop: "invoiceType"
        },
        {
          label: "结算方式",
          prop: "settlementType"
        },
        {
          label: "指定公司",
          prop: "companyLimitDetail",
          slot: "companyLimitDetail"
        },
        {
          label: "线路",
          prop: "line",
          hidden: this.quotationData.lineId ? false : true
        },
        {
          label: "备注",
          prop: "remark"
        }
      ]
    };
  },
  computed: {
    // 需要显示修改的列
    updateAttrs() {
      let res = JSON.parse(JSON.stringify(this.columns));
      res = res
        .filter(i => i.scopedSlots.customRender !== "quotationDetailSalesState")
        .map(i => i.scopedSlots.customRender);
      return res;
    }
  },
  watch: {
    // 监听报价信息，改变时重新请求
    quotationData() {
      this.getQuotationDetail();
    }
  },
  methods: {
    // 获取报价详情
    getQuotationDetail() {
      let quotationType = this.quotationData.quotationType; // 报价状态
      this.loading = true;
      this.columns.forEach(item => {
        if (item.scopedSlots.customRender === "premium") {
          item.hidden = this.quotationData.priceType === 1 ? false : true;
        } else if (item.scopedSlots.customRender === "price") {
          item.hidden = this.quotationData.priceType === 1 ? true : false;
        }
      });
      let request =
        this.type === "2" ? getquotationdetailtoaudit : getMyQuotationDetail;
      request({
        quotationId: this.quotationData.id,
        version: this.quotationData.version
      })
        .then(res => {
          if (quotationType === quotationDict.status.pending.value) {
            this.quotationDetail = res.auditQuotation;
            // 待审核报价需要展示修改信息
            comparison(
              res.auditQuotation.quotationDetailList,
              res.quotation.quotationDetailList
            ).then(d => {
              this.tableData = d;
            });
          } else {
            this.quotationDetail = res;
            this.tableData = res.quotationDetailList;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {
    this.getQuotationDetail();
  }
};
</script>

<style lang="scss" scoped>
.quotationDetail {
  ::v-deep .desc {
    margin-bottom: 8px;
  }
}
</style>
